Skip to content

Simple gaps between columns#100

Closed
jchnkl wants to merge 1 commit intoadamwulf:masterfrom
jchnkl:master
Closed

Simple gaps between columns#100
jchnkl wants to merge 1 commit intoadamwulf:masterfrom
jchnkl:master

Conversation

@jchnkl
Copy link

@jchnkl jchnkl commented Mar 26, 2013

This is a simple implementation for adding gaps to the left and the right of columns.

Setting gap to a non-zero value, e.g. 40 will add 20px to the left and
right of each column as additional gap. This is done by setting the
margin-{left,right} css style. Columns themselves are resized to width - gap.

Setting gap to a non-zero value, e.g. 40 will add 20px to the left and
right of each column as additional gap. This is done by setting the
margin-{left,right} css style. Columns themselves are resized to width - gap.
@adamwulf
Copy link
Owner

column widths need to stay as % when the divs are created. this way the container can be resized and the columns behave sanely. instead of baking in the gap into the width/margin, wrapping content automatically with a spacing div as described here: http://stackoverflow.com/questions/11882337/how-to-increase-padding-in-jquery-columnizer-with-fixed-number-of-columns-with would work better

@adamwulf adamwulf closed this Aug 20, 2013
@hparra
Copy link

hparra commented Aug 29, 2013

@adamwulf Thanks for the link. Adding it to the README as a hint to mimic CSS3 multi-column's column-gap would be helpful.

For the simple case outlined in the link above, you can mimic a column-gap of 32px in a two column config as so:

.column.first > * {
    padding-right: 16px;
}

.column.last > * {
    padding-left: 16px;
}

@hparra hparra mentioned this pull request Aug 29, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants